<template>

    <div id="ArtisanGradePage" style="width:1200px;height: 600px;">
        <el-page-header @back="goBack" content="技工星级">
        </el-page-header>
            <div style="width:900px;height:375px; margin: auto;" >
                <div style="display: flex;line-height: 50px;">
                   <el-input style="width:300px;" v-model="ArtisanGradeVO.starname"   placeholder="星级名称"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-input style="width:300px;" v-model="ArtisanGradeVO.multiple"   placeholder="星级权重"></el-input>
                     <el-button style="width:95px;height:39px;margin-top: 4px; margin-left: 161px;" @click="addArtisanGrade()"  type="success">保存</el-button>
                      <el-button style="width:95px;height:39px;margin-top: 4px; margin-left: 20px;" @click="empty()"   type="primary">清空</el-button>
                </div>
                
                <template>
                    <el-table :data="PageInfo.list" border >
                        <el-table-column label="序号" width="180">
							<template slot-scope="temp">
								{{temp.$index+1}}
							</template>
						</el-table-column>
                        <el-table-column prop="starname" label="星级名称" >
                        </el-table-column>
                        <el-table-column prop="multiple" label="星级权重" width="180" >
                        </el-table-column>
                        <el-table-column label="操作" width="200px">
                            <template slot-scope="temp">
                                <el-button type="primary" @click="dialogVisible=true,amendArtisanGrade(temp.row.starid)" icon="el-icon-edit" circle></el-button>
                                <el-button  type="danger" @click="removeArtisanGrade(temp.$index,temp.row.starid)" icon="el-icon-delete" circle></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            <div style="padding: 30px;"></div>
                    <el-pagination style="text-align: center;" :background="true" :pager-count="7" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PageInfo.pageNum" :page-size="PageInfo.pageSize" :total="PageInfo.total" :page-sizes="[3,5]" layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
			<div style="padding: 20px;"></div>


        	<div style="line-height: 50px; ">
				<el-dialog title="修改星级" :visible.sync="dialogVisible" width="43%" :before-close="handleCloses">
					<div>
						<span>星级名称：</span>&nbsp;<el-input style="width:300px;" v-model="Ar.starname"  placeholder="星级名称"></el-input><br>

                        <span>星级权重：</span>&nbsp;<el-input style="width:300px;" v-model="Ar.multiple"   placeholder="星级权重"></el-input><br>
					</div>
					<span slot="footer" class="dialog-footer">
				    <el-button @click="dialogVisible = false, show()">取 消</el-button>
				    <el-button type="primary"  @click="dialogVisible = false,amendArtisanGrade2()">确 定</el-button>
				  </span>
				</el-dialog>
			</div>

    </div>        
</template>

<script>
export default {
data() {
//这里存放数据
return {
PageInfo:{},
tableData:[],
ArtisanGradeVO:{},
dialogVisible:false,
Ar:{}
};
},
//计算属性
computed: {},
//方法集合
methods: {
    handleSizeChange(val) {
        this.gotoPage(this.PageInfo.pageNum, val);
    },
    handleCurrentChange(val) {
        this.gotoPage(val, this.PageInfo.pageSize);

    },
    handleCloses(done) {
         this.show();
		done();
    },
    goBack() {
        console.log('go back');
    },
    gotoPage (pageNum,pageSize){
        let _this=this;
        _this.$http.get(`http://localhost:8080/api/ArtisanGradeAction/queryArtisanGrade/${pageNum}/${pageSize}`).then(function(resp){
            _this.PageInfo=resp.data;
        });
    },
    removeArtisanGrade(i,id){
        let _this=this;
        this.$confirm('是否移除该数据?', '移除提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                _this.$http.delete(`http://localhost:8080/api/ArtisanGradeAction/removeArtisanGrade/${id}`).then(function(resp){
                    if(resp.data.code=="200"){
                       _this.gotoPage(1,5);
                    }
                });
                 this.$message({message: '恭喜你，删除成功', type: 'success'});
            }).catch(() => {
                this.$message("取消移除");
            });
    },
    addArtisanGrade(){
        if(this.ArtisanGradeVO.starname=="" || this.ArtisanGradeVO.starname==null){
            this.$message.error('错了哦，星级名称不能为空！');
            return;
        }
        if(this.ArtisanGradeVO.multiple=="" || this.ArtisanGradeVO.multiple==null){
             this.$message.error('错了哦，星级权限不能为空！');
            return;
        }
       let _this=this;
       _this.$http.post("http://localhost:8080/api/ArtisanGradeAction/addArtisanGrade",_this.ArtisanGradeVO).then(function(resp){
            if(resp.data.code=="200"){
                _this.ArtisanGradeVO.starname="";
                _this.ArtisanGradeVO.multiple="";
                _this.$message({message: '恭喜你，保存成功', type: 'success'});
                _this.gotoPage(1,5);
            }
       });
    },
    empty(){
        let _this=this;
        _this.ArtisanGradeVO.starname="";
        _this.ArtisanGradeVO.multiple="";
    },
    amendArtisanGrade(id){
        let _this=this;
        _this.Ar={};
        let list=this.PageInfo.list;
        for(let i=0;i<list.length;i++){
            if(list[i].starid==id){
               _this.Ar= list[i];
            }
        }

    },
    amendArtisanGrade2(){
         let _this=this;
         if(this.Ar.starname==""){
            this.$message.error('错了哦，星级名称不能为空！');
             _this.gotoPage(this.PageInfo.pageNum,this.PageInfo.pageSize);
            return;
        }
        if(this.Ar.multiple==""){
            this.$message.error('错了哦，星级权限不能为空！');
             _this.gotoPage(this.PageInfo.pageNum,this.PageInfo.pageSize);
            return;
           
        }
       
        _this.$http.put("http://localhost:8080/api/ArtisanGradeAction/amendArtisanGrade",_this.Ar).then(function(resp){
            if(resp.data.code=="200"){
                 _this.$message({message: '恭喜你，修改成功', type: 'success'});
                 _this.gotoPage(1,5);
            }
        });
    },
    show(){
          this.gotoPage(this.PageInfo.pageNum,this.PageInfo.pageSize);
    }

},
//挂载完成（可以访问DOM元素）
mounted() {
    this.gotoPage(1,5);
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
#ArtisanGradePage{
    cursor:default;
}

</style>